<template>
  <div id="main">
    <Mheader title="猫猫电影"/>
      <div id="content">
        <div class="movie_menu">
          <router-link class="city_name" to="/movie/city" tag="div">
            <span>{{$store.state.city.nm}}</span><i class="iconfont icon-lower-triangle"></i>
          </router-link>
          <div class="hot_swtich">
            <router-link class="hot_item" to="/movie/now" tag="div">正在热映</router-link>
            <router-link class="hot_item" to="/movie/coming" tag="div">即将上映</router-link>
          </div>
          <router-link class="search_entry" to="/movie/search" tag="div">
            <i class="iconfont icon-sousuo"></i>
          </router-link>
        </div>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    <Mfooter/>
    <router-view name='detail'></router-view>
  </div>
  
</template>

<script>
import Mheader from '@/components/Mheader'
import Mfooter from '@/components/Mfooter'
export default {
    name:'Movie',
    components:{
      Mheader,
      Mfooter
    },
    mounted(){
      setTimeout(async ()=>{
        let data = await this.$axios.get('api/citylocal')
        let nm = data.data.nm
        let id = data.data.id
        if(nm != this.$store.state.city.nm){
          // 使用element-ui组件弹出弹框
          this.$confirm('当前位置定位深圳，是否修改？', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '修改地址',
            cancelButtonText: '放弃修改'
          })
            .then(() => {
              localStorage.setItem('nm',nm)
              localStorage.setItem('id',id)
              location.reload()
              this.$message({
                type: 'info',
                message: '保存地址修改'
              });
            })
            .catch(action => {
              this.$message({
                type: 'info',
                message: action === 'cancel'
                  ? '放弃修改'
                  : '停留在当前地址页面'
              })
            });
          }
      },3000)
    }
}
</script>

<style>
#content{ flex:1; overflow:auto; margin-bottom: 50px; position: relative; display: flex; flex-direction:column;}
#content .movie_menu{ width: 100%; height: 45px; border-bottom:1px solid #e6e6e6; display: flex; justify-content:space-between; align-items:center; background:white; z-index:10;}
.movie_menu .city_name{ margin-left: 20px; height:100%; line-height: 45px;}
/* .movie_menu .city_name.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .city_name.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid; cursor: pointer;}
.movie_menu .hot_swtich{ display: flex; height:100%; line-height: 45px;}
.movie_menu .hot_item{ font-size: 15px; color:#666; width:80px; text-align:center; margin:0 12px; font-weight:700; cursor: pointer;}
/* .movie_menu .hot_item.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .hot_item.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}
.movie_menu .search_entry{ margin-right:20px; height:100%; line-height: 45px; cursor: pointer;}
/* .movie_menu .search_entry.active{ color: #ef4238; border-bottom: 2px #ef4238 solid;} */
.movie_menu .search_entry.router-link-active{ color: #ef4238; border-bottom: 2px #ef4238 solid;}
.movie_menu .search_entry i{  font-size:24px;}
.el-message-box__wrapper .el-message-box{width: 360px;}
.el-message{min-width: 360px;}
</style>